<template>
  <Header/>
  <a-flex gap="middle" vertical  align="center" style="margin-top: 120px">
    <a-form ref="formRef" :model="formState" layout="vertical" :label-col="{style: {width:'520px'}}" :wrapper-col="{span: 72}">
      <a-form-item
          name="title"
          label="主题"
          :rules="[{ required: true, message: '请输入主题!' }]"
      >
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item name="content" label="内容" :rules="[{ required: true, message: '请输入内容!' }]">
        <a-textarea :rows="8" :auto-size="{ minRows: 6, maxRows: 12 }" v-model:value="formState.content" />
      </a-form-item>
      <a-form-item >
        <a-button :disabled="!permit" :loading="loading" type="primary" @click="handelSubmit">提交</a-button>
      </a-form-item>
    </a-form>
  </a-flex>
</template>

<script setup>
import Header from "@/components/TopBar.vue";
import {addOpinion} from "@/api/OpinionRequest.js";
import { message } from 'ant-design-vue';
import { reactive, ref, watch} from 'vue';
import router from "@/router/index.js";

const formState = reactive({
  tittle: '',
  content: '',
});
const loading = ref(false);
const permit = ref(false);

watch(formState, (newVal)=>{
  permit.value = newVal.title !== '' && newVal.content !== '';
})

function handelSubmit(){
  loading.value = true;
  addOpinion(null, formState.title, formState.content).then(res => {
    loading.value = false;
    if (res.code === 0) {
      router.push('/')
    } else {
      message.error(res.msg);
    }
  })
}

</script>

<style scoped>

</style>